<template>
  <view class="order-detail" v-if="info.id">
    <view class="detail-header">
      <view class="box-flex">
        <image class="header-img" :src="getMedia(info.storeLogo)" mode="aspectFill"></image>
        <view class="header-h2">{{info.storeName}}</view>
      </view>
      <view class="header-list">
        <view class="list-item" v-for="item in info.items" :key="item.orderItemId">
          <image :src="getMedia(item.mediaUrl)" mode="aspectFill" class="img"></image>
          <view class="item-info">
            <view class="info-h2">
              <view class="dot2">{{item.title}}</view>
              ￥{{item.totalPayment}}
            </view>
            <view class="info-p">使用时间:2024.10.01-2024.10.31</view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-card detail-cate">
      <view class="cate-p">
        <view class="p-label">技术类型</view>
        <view class="p-span">超声波洗牙</view>
      </view>
      <view class="cate-p">
        <view class="p-label">适用人群</view>
        <view class="p-span">成人</view>
      </view>
      <view class="cate-p">
        <view class="p-label">洁 牙 机</view>
        <view class="p-span">中国啄木鸟</view>
      </view>
    </view>
     <view class="detail-card detail-info">
        <view class="card-title">服务项目</view>
        <view class="info-p">2人，工作日适用，需提前一天预约，更多详情请咨询客服小姐姐。</view>
      </view>

    <view class="detail-intro">
      <view class="intro-list title"><p>商品总价</p> ￥25.9</view>
      <view class="intro-list"><p>运费</p> ￥0</view>
      <view class="intro-list"><p>平台优惠 <span class="sub-theme">立减6元</span></p> -￥25.9</view>
      <view class="intro-list"><p>实付款</p> <span class="strong">￥25.9</span></view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        info:{},
        id:'',
      }
    },
    onLoad(options) {
      this.id = options.id
      uni.showLoading({
        title:'加载中...'
      })
      this.$get(`/product/myOrder/orderDetail/${options.id}`,'',1).then(res=>{
        if(res.code === '1') this.info = res.content
      })
    },
  }
</script>

<style lang="less" scoped>
.order-detail{
  padding: 0 24rpx 120rpx;
  min-height: 100vh;
  background: var(--page-bg);
  box-sizing: border-box;
  .detail-header{
    margin: 0 0 24rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 24rpx;
    .box-flex{
      align-items: center;
    }
    .header-img{
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      margin-right: 8rpx;
    }
    .header-h2{
      flex: 1;
      font-size: 24rpx;
      font-weight: bold;
      color: var(--title-color);
    }
    .header-list{
      .list-item{
        display: flex;
        align-items: center;
        font-size: 22rpx;
        font-weight: 500;
        margin: 20rpx 0 0;
        .img{
          width: 124rpx;
          height: 124rpx;
          border-radius: 20rpx;
          margin-right: 24rpx;
        }
        .item-info{
          flex: 1;
          .info-h2{
            font-size: 24rpx;
            color: var(--title-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
          }
          .info-p{
            margin-top: 24rpx;
            color: var(--sub-title);
          }
        }
      }
    }
  }  /// detail-header end

  .detail-card{
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    .card-title{
      font-size: 28rpx;
      font-weight: bold;
    }
  }
  .detail-cate{
    margin-bottom: 20rpx;
    .cate-p{
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #6D6D6D;
      margin-bottom: 20rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .p-label{
        color: var(--title-color);
        margin-right: 20rpx;
      }
      .p-span{
        flex: 1;
        display: flex;
        align-items: center;
        span{
          font-size: 22rpx;
          color: var(--sub-title);
          margin-left: auto;
        }
      }
    }
  }
  .detail-info{
    margin-bottom: 20rpx;
    .info-p{
      font-size: 24rpx;
      color: #6D6D6D;
      line-height: 40rpx;
    }
    .html{
      margin-top: 20rpx;
    }
  }
      
  .detail-intro{
    background: #fff;
    padding: 20rpx;
    border-radius: 32rpx;
    font-size: 26rpx;
    color: var(--title-color);
    font-weight: bold;
    .intro-list{
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      &.title p{
        font-size: 28rpx;
        font-weight: bold!important;
        color: var(--title-color);
      }
      p{
        margin-right: auto;
        color: #6D6D6D;
        font-weight: 400;
      }
      .sub-theme{
        font-size: 22rpx;
        margin-left: 8rpx;
      }
    }
  }
} //  order-detail end
</style>
